<template>
  <!-- 侧面板 -->
  <el-scrollbar>
    <!-- collapse-transition是否开启折叠动画 -->
    <el-menu
      :default-openeds="opens"
      :collapse-transition="false"
      :collapse="isCollapse"
      router
      @select="handleSelect"
    >
      <div class="aside_title_all">
        <span v-show="logoTextShow">校园疫情管理系统</span>
      </div>

      <el-menu-item index="/front/userhourse">
        <el-icon><House /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><message /></el-icon>
          <span>个人中心</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/front/userperson">个人信息</el-menu-item>
          <el-menu-item index="/front/hesuanresult">核酸检测</el-menu-item>
          <el-menu-item index="/front/vaccinesituation">疫苗接种</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item index="/front/myheathclock">
        <el-icon><EditPen /></el-icon>
        <span>健康打卡</span>
      </el-menu-item>
    </el-menu>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'common-aside',
  data() {
    return {
      menus: localStorage.getItem('menus')
        ? JSON.parse(localStorage.getItem('menus'))
        : [],
      opens: localStorage.getItem('menus')
        ? JSON.parse(localStorage.getItem('menus')).map((v) => v.id + '')
        : []
    }
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: true
    },
    logoTextShow: {
      type: Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleSelect() {
      // console.log(index);
      // alert(this.$route.name)
    },
    searchicon(values) {
      // console.log(values)
      if (values) {
        return values.startsWith('icon-')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.aside_title_all {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  color: rgb(64, 115, 177);
}
.el-menu {
  border-right: 0;
}

// /deep/ .el-menu-item-group__title {
//   padding: 0;
// }

// @deep: ~'>>>';
// .el-sub-menu {
//   @{deep} .el-sub-menu__icon-arrow {
//     display: none;
//   }
// }
// ::v-deep .el-sub-menu {
//   .el-sub-menu__icon-arrow {
//     display: none;
//   }
// }

// /deep/ .el-sub-menu {
//   .el-sub-menu__icon-arrow {
//     display: none;
//   }
// }
// :deep(.el-sub-menu) {
//   .el-sub-menu__icon-arrow {
//     display: none;
//   }
// }
</style>